<template>
	<section>
		<el-row>
			<!--工具条1-->
			<!--如果有更多工具条,放开此注释
			<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
				<el-col :span="4">
				</el-col>
			</el-col>
			-->

			<!--新增界面 AdPosition 广告位置-->
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
				<!--
				<el-form-item label="编号" prop="id">
					<el-input v-model="addForm.id" auto-complete="off"></el-input>
				</el-form-item>
				 -->
				<el-form-item label="位置名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="宽度" prop="width">
					<el-input-number v-model="addForm.width" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="高度" prop="height">
					<el-input-number v-model="addForm.height" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="位置描述" prop="descs">
					<el-input v-model="addForm.descs" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="位置类型" prop="posType">
					<template slot-scope="scope">
						<el-select  v-model="posType" placeholder="请选择位置类型"  style="width: 60%;">
							<el-option v-for="item in posTypeOptions"  :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-form-item>
				<el-form-item label="位置代码" prop="posCode">
					<el-input v-model="addForm.posCode" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="共享级别" prop="shareLvl">
          <template>
            <el-radio-group v-model="addForm.shareLvl">
              <el-radio :label="0">门店私有</el-radio>
              <el-radio :label="1">商户私有</el-radio>
              <el-radio :label="2">平台共有</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
				<el-form-item>
					<el-col :span="24">
						<el-col :span="4" :offset="16">
							<el-button @click.native="handleCancel">取消</el-button>
						</el-col>
						<el-col :span="4">
							<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
						</el-col>
					</el-col>
				</el-form-item>
			</el-form>
		</el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util'; //全局公共库
	import {
		addPosition,
		addPositionOnly
	} from '@/api/mdp/arc/ad/position';
  import { mapGetters } from 'vuex';
	export default {
		props: ['position', 'visible'],
		watch: {
			'position': function(position) {
				//this.addForm = position;
			},
			'visible': function(visible) {
				if (visible == true) {
					//从新打开页面时某些数据需要重新加载，可以在这里添加
				}
			}
		},
		data() {
			return {
				posType:'0',
				posTypeOptions:[
					{
							value: '0',
							label: '总部店'
					},
					{
						value: '1',
						label: '具体门店'
					}
				],
				options: {}, //下拉选择框的所有静态数据
				addLoading: false,
				addFormRules: {
					name: [{
						required: true,
						message: '名称不能为空',
						trigger: 'blur'
					}],
					posCode:[
						 {required: true, message: '请输入位置代码', trigger: 'blur' },
						 { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
					]
				},
				//新增界面数据 广告位置
				addForm: {
					id: '',
					name: '',
					width: '',
					height: '',
					descs: '',
          locationId:'',
          shopId:'',
          posType:'',
          posCode:'',
          shareLvl:''
				}
				/**begin 在下面加自定义属性,记得补上面的一个逗号**/

				/**end 在上面加自定义属性**/
			} //end return
		}, //end data
		methods: {
			// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
			handleCancel: function() {
				this.$emit('cancel');
			},
			//新增提交AdPosition 广告位置 父组件监听@submit="afterAddSubmit"
			addSubmit: function() {
				if(this.addForm.name.replace(/(^\s*)/g, "")==''){
					this.$message({
						message:'位置名称不能为空',
						type:  'error'
					});
					return;
				}
				if(this.addForm.posCode.replace(/(^\s*)/g, "")==''){
					this.$message({
						message:'位置类型不能为空',
						type:  'error'
					});
					return;
				}
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
              this.addForm.shopId=this.userInfo.shopId;
              this.addForm.locationId = this.userInfo.locationId;
							let params = Object.assign({}, this.addForm);
							params.posType=this.posType;
							addPositionOnly(params).then((res) => {
								this.addLoading = false;
								var tips = res.data.tips;
								if (tips.isOk) {
									this.$refs['addForm'].resetFields();
									this.$emit('submit');
								};
								this.$message({
									message: tips.msg,
									type: tips.isOk ? 'success' : 'error'
								});
							}).catch(() => {
								this.addLoading = false;
							});
						});
					}
				});
			}
			/**begin 在下面加自定义方法,记得补上面的一个逗号**/

			/**end 在上面加自定义方法**/

		}, //end method
		components: {
			//在下面添加其它组件 'ad-position-edit':AdPositionEdit

		},
		computed: {
			...mapGetters([
				'roles', 'userInfo', 'myShops', 'myLocations'
			])
		},
		mounted() {
			//this.addForm = Object.assign(this.addForm, this.position);
			//加载下拉列表 如有需要去掉注释
			/**
			let optionsParams={code:'all',fieldNames:['sex']};
			selectCacheOptions(optionsParams).then(res=>{
				this.options=res.data.data;
			});
			**/
			//给下拉列表初始化默认值
			//this.addForm.xxx=getDefaultValue(this.options.xxx,'1');

			/**在下面写其它函数***/

		} //end mounted
	}
</script>

<style scoped>

</style>
